<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;padding: 0;
            list-style: none;
        }
        body{
            background-image: url("../img/Tesla\ \(14\).jpeg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>


    <style>
        .navbar {
            overflow: hidden;
            background-color: #333;
        }

        .navbar a {
            float: left;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .dropdown {
            float: left;
            overflow: hidden;
        }

        .dropdown .dropbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .navbar a:hover,
        .dropdown:hover .dropbtn {
            background-color: red;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

        .dropdown:hover .dropdown-content {
            display:block;
        }
    </style>
    <div class="navbar">
        <a href="#news">News</a>
        <div class="dropdown">
            <button class="dropbtn">Dropdown<i class="fa fa-caret-down"></i></button>
            <div class="dropdown-content">
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>
    </div>

    <h1>  下拉框实现  </h1>
    <h1>   必知必会   </h1>







    <style>
        .right-dropdown-menu {
            position: absolute;
            right: 50px;
        }
        .right-dropdown-menu svg{
            width: 35px;
            cursor: pointer;
        }
        .right-dropdown-menu ul{
            position: absolute;
            width: 120px;
            right: 0;
            border: 1px solid white;
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }
        .right-dropdown-menu ul li{
            padding: 23px 0;
            text-align: center; 
            cursor: pointer;
            color: white;
        }
        .right-dropdown-menu ul li:hover{
            background: hsla(0, 0%, 100%, 0.3);
        }

    </style>
    <div class="right-dropdown-menu">
        <svg fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
        </svg>
        <ul>
            <li>主页</li>
            <li>关于</li>
            <li>展示</li>
        </ul>
    </div>





    <style>
        pre{
            width: 40%;
            font-weight: bolder;
            font-size: 23px;
            background: hsla(0, 0%, 100%, 0.3);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border: red 1px solid;
        }
    </style>
    <pre>

        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .navbar a:hover,
        .dropdown:hover .dropbtn {
            background-color: red;
        }

        右边这个高斯模糊的半透明效果实现:
        根盒子设置:

        .right-dropdown-menu {
            position: absolute;
            right: 50px;
        然后:
        .right-dropdown-menu ul{
            position: absolute;
            width: 120px;
            right: 0;
            border: 1px solid white;
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
        }

        模糊代码实现:
        background: hsla(0, 0%, 100%, 0.3);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    </pre>
</body>
</html>